<template>
  <div>
    <!--背景-点击可关闭卡片-->
    <mark
      class="bgCard"
      v-if="showSeason"
      @click.stop="showSeason=false"
    ></mark>
    <el-input placeholder="请选择季度" v-model="showValue" @focus="showSeason=true">
      <i slot="prefix" class="el-input__icon el-icon-date"></i>
    </el-input>
    <el-card
      class="box-card"
      style="width:20%;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
      v-if="showSeason"
    >
      <div slot="header" class="clearfix" style="text-align:center;padding:0">
        <button
          type="button"
          aria-label="前一年"
          class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
          @click="prev"
        ></button>
        <span role="button" class="el-date-picker__header-label">{{ year }}年</span>
        <button
          type="button"
          aria-label="后一年"
          @click="next"
          class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
        ></button>
      </div>
      <div class="text item" style="text-align:center;">
        <el-button
          type="text"
          size="medium"
          style="width:30%;color: #606266;float:left;"
          @click="selectSeason(1)"
        >第一季度
        </el-button>
        <el-button
          type="text"
          size="medium"
          style="float:right;width:40%;color: #606266;"
          @click="selectSeason(2)"
        >第二季度
        </el-button>
      </div>
      <div class="text item" style="text-align:center;">
        <el-button
          type="text"
          size="medium"
          style="width:30%;color: #606266;float:left;"
          @click="selectSeason(3)"
        >第三季度
        </el-button>
        <el-button
          type="text"
          size="medium"
          style="float:right;width:40%;color: #606266;"
          @click="selectSeason(4)"
        >第四季度
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
/**
 * @file:  View 组件 季节选择控件
 * @date: 2021-03-22
 * @description: UI组件  可选择季节
 */
export default {
  props: {
    /**
     * @默认赋值
     *  date类型，默认值传的是时间 2021-03-22
     *  quarter 类型，是季度 2021-01
     * */
    defaultValue: {
      type: String,
      default: ''
    },
    /**
     * @默认赋值类型
     *  date类型，默认值传的是时间 2021-03-22
     *  quarter 类型，是季度 2021-01
     * */
    defaultType: {
      type: String,
      default: 'date'
    }
  },
  data() {
    return {
      showSeason: false,
      year: new Date().getFullYear(), //默认当前年
      month: new Date().getMonth() + 1, //默认当前月
      showValue: '' //页面上input的内容
    }
  },
  created() {
    //如果有默认值，直接用，没有默认值，把当前日期作为默认值
    // if (this.defaultValue) {
    //   this.changeDefaultVal()
    // } else {
    //   this.defaultValue = this.year + '-' + this.month
    //   this.changeDefaultVal()
    // }
  },
  watch: {
    // defaultValue(value) {
    //   this.changeDefaultVal()
    // }
  },
  methods: {
    emptyShowValue(){
      this.showValue='';
    },
    // disableButton(month) {
    //   let dateStr = this.year + "-" + month + "-01";
    //   let date = new Date(dateStr);
    //   return date >= new Date();
    // },
    /**
     * 处理默认值
     * @params value == 默认值
     * @return 页面input内容回填默认值
     * */
    changeDefaultVal() {
      let arr = this.defaultValue.split('-')
      this.year = arr[0]
      let quarter = '' //季度
      if (this.defaultType === 'quarter') {
        quarter = arr[1]
        this.showValue = `${this.year}年${quarter}季度`
      } else if (this.defaultType === 'date') {
        let month = +arr[1]
        if (month >= 1 && month <= 3) {
          this.showValue = `${this.year}年1季度`
        } else if (month >= 4 && month <= 6) {
          this.showValue = `${this.year}年2季度`
        } else if (month >= 7 && month <= 9) {
          this.showValue = `${this.year}年3季度`
        } else if (month >= 10 && month <= 12) {
          this.showValue = `${this.year}年4季度`
        }
      }


    },
    prev() {
      this.year = +this.year - 1
    },
    next() {
      this.year = +this.year + 1
    },
    selectSeason(quarter) {
      let month = quarter * 3 - 2;
      if (month < 10) {
        month = '0' + month;
      }
      let date = `${this.year}-${month}-01`;
      // let result = {
      //   date: `${this.year}-${quarter*3-2}-01`,
      //   year: this.year,
      //   quarter: quarter
      // }
      //发送事件给父元素
      this.$emit('getValue', date)
      this.showSeason = false
      this.showValue = `${this.year}年${quarter}季度`
    }
  }
}
</script>
<style scoped>
.bgCard {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
}
</style>
